<template lang="pug">
DataTables.table-dma.table-xxs(
  v-loading="loading"
  name='dmaTable'
  ref="table"
  :hasPage="true"
  :tableData="tableData"
  :tableWidth="tableWidth"
  :operationList="[]"
  :columns="columns"
  :viewer="viewer"
  :tableFullList="tableFullList")
</template>

<script>
/**
 * @name TableDMA DMA专用水表
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示分区的数据统计
 *参数：
 */
import DataTables from '@/components/Datatables'
import config from '../../../config'
export default {
  components: {
    DataTables
  },
  name: 'TableDMA',
  props: {
    callbackData: {
      type: Object,
      default: () => {
        return {
          timeRange: [new Date(), new Date()],
          areaId: 1
        }
      }
    }
  },
  data () {
    return {
      loading: true,
      tableWidth: document.body.pageWidth,
      viewer: {
        main: [
          'siteCode',
          'siteName',
          'plusTotalFlux', // 正累计流量
          'reverseTotalFlux', // 反累计流量
          'totalFlux', // 净累计流量
          'avgPressure',
          'percent'// 占比
        ]
      },
      // filterByAlways: {
      //   areaId: this.callbackData.areaId,
      //   startTime: this.callbackData.timeRange[0].getTime(),
      //   endTime: this.callbackData.timeRange[1].getTime()
      // },
      tableFullList: [
        'siteCode',
        'siteName',
        'plusTotalFlux', // 正累计流量
        'reverseTotalFlux', // 反累计流量
        'totalFlux', // 净累计流量
        'avgPressure',
        'percent'// 占比
      ],
      columns: {
        ...config.initColumns,
        siteCode: {
          label: '站点编号'
        },
        siteName: {
          label: '站点名称'
          // render: ({data}) => {
          //   return this.deviceNames.find(item => item.value === data).label || '-'
          // }
        },
        plusTotalFlux: {
          label: '正累计流量(m³)',
          sort: true,
          render: ({data}) => {
            return this.formatValue(data)
          }
        },
        reverseTotalFlux: {
          label: '反累计流量(m³)',
          sort: true,
          render: ({data}) => {
            return this.formatValue(data)
          }
        },
        totalFlux: {
          label: '净累计流量(m³)',
          sort: true,
          render: ({data}) => {
            return this.formatValue(data)
          }
        },
        avgPressure: {
          label: '平均压力(m)',
          sort: true,
          render: ({data}) => {
            return this.formatValue(data * 100)
          }
        },
        percent: {
          label: '占比(%)',
          sort: true,
          render: ({data}) => {
            return this.formatValue(data)
          }
        }
      },
      tableData: [],
      viewerList: {
        mainList: this.tableFullList
      }
    }
  },
  methods: {
    getData () {
      this.loading = true
      this.$get({
        url: `/pn/dpa/stat/dma${this.callbackData.areaId ? '?areaId=' + this.callbackData.areaId : ''}`,
        params: {
          startTime: this.callbackData.timeRange[0].getTime(),
          endTime: this.callbackData.timeRange[1].getTime()
        }
      }).then(res => {
        this.loading = false
        this.tableData = res.data
      })
    },
    formatValue (data) {
      return data || data === 0 ? parseFloat(data).toFixed(3) : '-'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getData()
    })
  }
}
</script>

<style lang="sass">
.table-dma
  padding: 0!important
</style>
